<template>
  <div>
    <div class="tab">
      <base-form :formList="formList" @search="search"></base-form>
    </div>
    <div class="table">
      <div class="btn">
        <Button type="success" class="btn-save" @click="add">添加</Button>
      </div>
      <IviewTable
        :height="590"
        border
        :page="page"
        :columns="tableColumns"
        :data="tableData"
        :maxheight="'350'"
        :context="self"
        backStage
      ></IviewTable>
    </div>
    <validate-modal-form
      ref="modal"
      :modalFormStatus="modalFormStatus"
      title="添加用户"
      @setForm="addUser"
      :formValidate="formValidate"
      :ruleValidate="ruleValidate"
      :formList="modalFormList"
    ></validate-modal-form>
    <validate-modal-form
      ref="updateModal"
      title="编辑用户"
      @setForm="updateUser"
      :formValidate="formValidate"
      :ruleValidate="ruleValidate"
      :formList="modalUpdateFormList"
    ></validate-modal-form>
    <validate-modal-form
      ref="updatePasswordModal"
      title="修改密码"
      @setForm="updatePassword"
      :formValidate="updatePasswordValidate"
      :ruleValidate="updatePasswordRuleValidate"
      :formList="modalPasswordList"
    ></validate-modal-form>
  </div>
</template>

<script>
import validateModalForm from '_c/validateModalForm'
import IviewTable from '_c/iview/IviewTable'
import baseForm from '@/components/baseForm'
export default {
  name: 'userManagement',
  components: {
    baseForm,
    IviewTable,
    validateModalForm,
  },
  data() {
    return {
      self: this,
      modalFormStatus: false,
      formValidate: {
        displayName: '',
        userName: '',
        password: '',
        role: '',
        mobile: '',
        enable: 'true',
      },
      ruleValidate: {
        displayName: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
        userName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        // role: [
        //     { required: false, message: '角色不能为空', trigger: 'blur' }
        // ],
      },
      updatePasswordRuleValidate: {
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        newpassword: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
      },
      updatePasswordValidate: {
        password: '',
        newpassword: '',
      },
      modalPasswordList: [
        {
          type: 'input',
          label: '新密码',
          model: 'password',
          placeholder: '请输入密码',
        },
        {
          type: 'input',
          label: '确认新密码',
          model: 'newpassword',
          placeholder: '请输入密码',
        },
      ],
      modalFormList: [
        {
          type: 'input',
          label: '账号',
          model: 'userName',
          placeholder: '请输入账号',
        },
        {
          type: 'input',
          label: '姓名',
          model: 'displayName',
          placeholder: '请输入姓名',
        },
        {
          type: 'input',
          label: '密码',
          model: 'password',
          placeholder: '请输入密码',
        },
        {
          type: 'select',
          label: '角色',
          model: 'role',
          options: [],
          placeholder: '请选择角色',
        },
        {
          type: 'input',
          label: '联系电话',
          model: 'mobile',
          placeholder: '请输入联系电话',
        },
        {
          type: 'radio',
          label: '是否启用',
          model: 'enable',
          placeholder: '请选择状态',
          options: [
            {
              label: '是',
              key: 'true',
            },
            {
              label: '否',
              key: 'false',
            },
          ],
        },
      ],
      modalUpdateFormList: [
        {
          type: 'input',
          label: '账号',
          model: 'userName',
          placeholder: '请输入姓名',
        },
        {
          type: 'input',
          label: '姓名',
          model: 'displayName',
          placeholder: '请输入账号',
        },
        {
          type: 'select',
          label: '角色',
          model: 'role',
          options: [],
          placeholder: '请选择角色',
        },
        {
          type: 'input',
          label: '联系电话',
          model: 'mobile',
          placeholder: '请输入联系电话',
        },
        {
          type: 'radio',
          label: '是否启用',
          model: 'enable',
          placeholder: '请选择状态',
          options: [
            {
              label: '是',
              key: 'true',
            },
            {
              label: '否',
              key: 'false',
            },
          ],
        },
      ],
      formList: [
        {
          label: '账号',
          type: 'input',
          model: 'displayName',
        },
        {
          label: '姓名',
          type: 'input',
          model: 'userName',
        },
      ],
      page: {
        current: 1,
        pageSize: 40,
        total: 0,
      },
      rowData: {},
      tableData: [],
      tableColumns: [
        {
          title: '账号',
          key: 'userName',
        },
        {
          title: '姓名',
          key: 'displayName',
        },
        {
          title: '角色',
          key: 'role',
        },
        {
          title: '电话',
          key: 'mobile',
        },
        {
          title: '状态',
          key: 'auditStatus',
          render: (h, { row }) => {
            return row.enable ? h('span', '启用') : h('span', '禁用')
            // if (params.row.auditStatus === 1) {
            //     return h('span', '审核通过')
            // } else if (params.row.auditStatus == 0) {
            //     return h('span', '待完善信息')
            // } else if (params.row.auditStatus === 2) {
            //     return h('span', '待审核')
            // } else if (params.row.auditStatus === 3) {
            //     return h('span', '审核中')
            // } else if (params.row.auditStatus === 4) {
            //     return h('span', '审核不通过')
            // }
          },
        },
        {
          title: '操作',
          key: 'action',
          // fixed: 'right',
          width: 320,
          render: (h, params) => {
            return h('div', [
              h(
                'span',
                {
                  style: { marginRight: '10px', color: '#66bc7a', cursor: 'pointer' },
                  props: {},
                  on: {
                    click: () => {
                      this.updateData(params.row)
                      this.rowData = params.row
                    },
                  },
                },
                '编辑'
              ),
              h(
                'span',
                {
                  style: { marginRight: '10px', color: '#bc7766', cursor: 'pointer' },
                  on: {
                    click: () => {
                      this.updateSatus(params.row)
                      this.rowData = params.row
                    },
                  },
                },
                params.row.enable ? '禁用' : '启用'
              ),
              h(
                'span',
                {
                  style: { marginRight: '10px', color: 'red', cursor: 'pointer' },
                  on: {
                    click: () => {
                      this.deleteUsers(params.row)
                      this.rowData = params.row
                    },
                  },
                },
                '删除'
              ),
              h(
                'span',
                {
                  style: { marginRight: '0px', color: '#66bc7a', cursor: 'pointer' },
                  on: {
                    click: () => {
                      this.openUpdatePassword(params.row)
                      this.rowData = params.row
                    },
                  },
                },
                '修改密码'
              ),
            ])
          },
        },
      ],
    }
  },
  mounted() {
    this.getUserList()
    this.getRoleList()
  },
  methods: {
    getRoleList() {
      this.$api.account.getRoleList().then((res) => {
        this.modalFormList[3].options = res
        this.modalUpdateFormList[2].options = res
      })
    },
    search(data) {
      this.getUserList(data)
    },
    add() {
      this.$refs.modal.status = true
      this.$forceUpdate()
    },
    getUserList(params = {}) {
      this.$api.account.getUser(params).then((res) => {
        this.tableData = res.records.map((item) => {
          this.$api.account.getUsersRole({}, [item.id]).then((role) => {
            this.$set(item, 'role', role[0].roleName)
          })
          return item
        })
        this.page.total = res.total
      })
    },
    addUser(params) {
      this.$api.account.addUsers(params).then((res) => {
        this.getUserList()
        this.$refs.modal.status = false
        this.$api.account.updateUsersRole([params.role], [res.id]).then((res) => {})
      })
    },
    updateData(row) {
      this.$refs.updateModal.status = true
      this.$api.account.getUsersRole({}, [row.id]).then((res) => {
        this.formValidate.role = res[0].id
      })
      for (let key in row) {
        if (key === 'enable') {
          row[key] = row[key] + ''
        }
        this.formValidate[key] = row[key]
      }
    },
    updateUser(params) {
      this.$refs.updateModal.status = false
      this.$api.account.updateUsers(params, [this.rowData.id]).then((res) => {
        this.getUserList()
      })
      this.$api.account.updateUsersRole([params.role], [this.rowData.id]).then((res) => {})
    },
    updateSatus(row) {
      this.$Modal.confirm({
        title: '修改状态',
        content: !row.enable
          ? '<p>是否继续进行启用操作？启用后该账号可正常登录系统!</p>'
          : '<p>是否继续进行禁用操作？禁用后该账号将无法登录系统!</p>',
        onOk: () => {
          row.enable = !row.enable
          this.$api.account.updateUsers(row, [this.rowData.id]).then((res) => {
            console.log(res)
            this.getUserList()
          })
        },
        onCancel: () => {
          // this.$Message.info('点击了取消');
        },
      })
    },
    deleteUsers(row) {
      this.$Modal.confirm({
        title: '删除用户',
        content: '<p>是否继续进行删除操作？删除后该账号将彻底删除</p>',
        onOk: () => {
          this.$api.account.deleteUsers({}, [this.rowData.id]).then((res) => {
            console.log(res)
            this.getUserList()
          })
        },
        onCancel: () => {
          // this.$Message.info('点击了取消');
        },
      })
    },
    openUpdatePassword(row) {
      this.$refs.updatePasswordModal.status = true
      this.updatePasswordValidate = { ...this.updatePasswordValidate, ...row }
    },
    updatePassword(data) {
      this.$api.account.updateUsers(data, [this.rowData.id]).then((res) => {
        console.log(res)
        this.getUserList()
        this.$refs.updatePasswordModal.status = false
      })
    },
  },
}
</script>

<style lang="less" scoped>
.tab {
  background: #ffffff;
  padding-top: 20px;
}
.table {
  background: #ffffff;
  margin-top: 20px;
  padding: 20px 30px 0;
  position: relative;
  height: calc(100vh - 230px);
  /deep/.i-page.fixed {
    position: absolute;
    bottom: -40px;
  }
  .btn {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
}
.btn-save {
  width: 80px;
  height: 30px;
  background: #85c989;
  box-shadow: 0px 2px 2px 0px #448247, 0px 0px 1px 0px #b4ffb9;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0px 1px 1px #163124, 0px 3px 5px #bcffca;
  margin-right: 11px;
  border: none;
}
</style>
